<template> 
	<view class="box" >
		<view v-if="isArise" class="top">
			<view class="top_text" v-if="commentAward > 0">发布动态有机会获得<text style="color: red;padding: 0 5rpx;"> {{commentAward}} </text>面值</view>
			<view class="top_fb" @click="toRelease">发布</view>
		</view>
		
		<view v-if="isArise" class="textarea">
			<textarea class="textarea_" :hold-keyboard="false" v-model="textareaValue" :auto-blur="true" @blur="blurTextarea" @focus="focusTextarea" placeholder="说点什么吧~" :show-confirm-bar="false"/>
		</view>
		
		<view v-if="isArise" class="lable">
			<view class="lable_" @click="getShowLable"><text>#</text>添加标签</view>
			<view class="lable_1" v-for="(item, index) in showLabelList" :key="index" @click="getTextareaValue(item,item.id,index)">{{item.label}}</view>
		</view>
		
		<view v-if="isArise" class="image">
			<!-- :isShowDelete="false" -->
			<u-upload :disabled="false" :isShowDelete="false" ref="uUpload" :auto-upload="false" del-bg-color="rgba(255,255,255,0)" class="addBtn_" :custom-btn="true" width="156" height="156"
			:max-count="12"  @on-choose-complete="onChange" :marginLeft="isLeft ? 0 : 172" @on-remove="onRemove">
				<view slot="addBtn" class="addBtn">
					<u-icon name="plus" color="#909499" size="48"></u-icon>
				</view>
			</u-upload>
		</view>
		
		<u-popup v-if="isArise" v-model="showLable" mode="bottom" border-radius="12">
			<view class="popup_">
				<view class="popup_title">
					添加标签
					<u-icon @click="setShowLable"  class="popup_title_" name="close" color="#555a62;" size="40"></u-icon>
				</view>
				<view>
					<scroll-view class="scroll-view_H" scroll-y="true">
						<view class="popup_content">
							<view class="list" :class="item.isShow == 200 ? ' list_a' : ''" v-for="(item, index) in labelList" :key="index" @click="setIsShow(index)">{{item.label}}</view>
						</view>
					</scroll-view>
				</view>
				<view class="wc" @click="setWcData">完成</view>
			</view>
		</u-popup>
		
		<w-compress v-if="isArise" class="oprt" ref='wCompress'/>
		<cmerror v-if="!isArise"></cmerror>
	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue'
	import cmerror from '@/components/cmerror/cmerror.vue'
	export default {
		components: {
		    WCompress,
			cmerror
		},
		data() {
			return {
				// menuButtonInfo: {
				// 	top: 25
				// },
				tishiHeight: 0, //提示高度
				isTishiShow: false,
				textareaValue: '',
				ossSignData: {},	//上传步骤一
				imageUrlList: [],//上传图片url集合
				content: "",//内容
				activityId: -1, //活动主键，如果是在活动中发布的动态
				commentAward: -1,//面值
				showLable: false,
				labelList: [],
				showLabelList: [],
				labelListApi: [],
				uploadEvet: [],
				tempFilePaths: [],
				isLeft: false
			}
		},
		onLoad(param) {
			this.initOnShow().then(res=>{
				
			})
			this.init(param)
		},
		computed: {
			flourUser() {
				return this.$store.state.flourUser;
			},
			isArise() {
				return this.$store.state.isArise;
			},
			Version() {
				return this.$store.state.Version;
			}
		},
		methods: {
			initOnShow() {
				return new Promise((ress, rejj) => {
			
					this.isShow = 2;
					this.$apis.accountInfo().then(res => {
						if (res.code == 200) {
							this.userPhoneApi = res.data.phone;
							this.imgs = res.data.awardPrivilegeBg;
							if (res.data.version == this.Version) {
								this.$store.commit('updataArise', true);
								
							} else {
								this.$store.commit('updataArise', false);
							}
			              ress();
			              }
			
						console.log("个人信息成功", res)
					}).catch(err => {
						
						ress();
						console.log("个人信息错误", err)
					})
				})
			},
			
			init(param) {
				if(param && param.activityId){
					console.log("param", param)
					this.commentAward = param.commentAward
					this.activityId = param.activityId
				}
				
				this.$apis.ossSign().then(res => {
					this.ossSignData = res.data
					console.log("图片上传1：this.ossSignData", this.ossSignData)
				})
				this.$apis.labelList().then(res => {
					let v = res.data
					v.forEach((item, index) => {
						console.log("item",item)
						item.labelList.forEach((item1, index1) => {
							this.labelList.push(item1)
						})
					})
					console.log("this.labelList", this.labelList)
					this.labelList.forEach((item, index) => {
						item.isShow = 0
					})
				})
			},
			setIsShow(index){
				let newArr = JSON.parse(JSON.stringify(this.labelList));
				if(newArr[index].isShow == 200){
					newArr[index].isShow = 0;
				}else{
					newArr[index].isShow = 200;
				}
				
				this.labelList = JSON.parse(JSON.stringify(newArr));
				// this.$forceUpdate()
				
				console.log("this.labelList",this.labelList[index])
			},
			setWcData(){
				this.showLable = false
				this.showLabelList = []
				this.labelList.forEach((item, index) => {
					if(item.isShow == 200){
						this.showLabelList.push({
							label: item.label,
							id: item.labelId
						})
						console.log("item",item)
						this.labelListApi.push({labelId: item.labelId})
					}
				})
			},
			getShowLable() {
				this.showLable = true
			},
			goNavigateBack() {
				uni.navigateBack()
			},
			focusTextarea(e) {
				this.isTishiShow = true
				this.tishiHeight = e.detail.height
			},
			blurTextarea(e) {
				this.isTishiShow = false
			},
			getTextareaValue(value,id,index){
				this.labelList.forEach((item,i) => {
					if(id == item.labelId){
						item.isShow = 0
						
					}
				})
				console.log(this.showLabelList.splice(index,1))
				// 后面添加参数当作添加的值
				// this.textareaValue +=  '# '+ value
			},
			onRemove(e){
				console.log("onRemove-删除", e)
				console.log("删除", this.uploadEvet)
				// this.uploadEvet.splice(e,1)
				// console.log("删除", this.uploadEvet)
				let tempFilePaths_ = []
				this.uploadEvet.forEach((item, index) => {
					tempFilePaths_.push(item.file.path)
				})
				this.tempFilePaths = tempFilePaths_
			},
			onChange(e) {
				console.log("onChange", e)
				this.uploadEvet = []
				this.tempFilePaths = []
				let tempFilePaths_ =[]
				this.uploadEvet = e
				if(e.length == 12){
					this.isLeft = true;
				}else{
					this.isLeft = false;
				}
				e.forEach((item, index) => {
					tempFilePaths_.push(item.file.path)
				})
				this.tempFilePaths = tempFilePaths_
			},
			toRelease() {
				this.content = this.textareaValue
				if(this.content == ''){
					uni.showToast({
						title: "内容不能为空",
						icon: "none"
					})
					return
				}
				if(this.uploadEvet.length == 0){
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					})
					return
				}
				if(this.labelListApi == '' || this.labelListApi.length <= 0){
					uni.showToast({
						title: "请添加标签",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: "发布中"
				})
				
				// 上传完成 开始发布
				this.setUploadData().then(resSS => {
					console.log("resSS",resSS)
					console.log("resSS.length",resSS.length)
					if(resSS.length > 0){
						let showValue = resSS.join(',')
						uni.hideLoading()
						uni.showToast({
							title:　"第"+ showValue +"张图片不合法 请删除",
							icon: "none",
							duration: 2500
						})
						return
					}
					let _data = {
						content: this.content,
						imageList: this.imageUrlList,
						labelList: this.labelListApi
					}
					if(this.activityId != '' && this.activityId != -1){
						//活动主键，如果是在活动中发布的动态
						_data.activityId = this.activityId
					}
					
					this.$apis.dynamicPost(
						_data
					).then( res => {
						console.log("添加成功",res)
						uni.hideLoading()
						uni.showToast({
							title: "已发布",
							duration: 2000,
							success: res => {
								setTimeout(() => {
									uni.navigateBack()
								},1800)
							}
						})
					})
				})

			},
			setShowLable(){
				this.showLable = false
			},
			// 压缩
			ffE() {
			  return	new Promise((resss,rejjj)=>{
				  this.$refs.wCompress.start(this.tempFilePaths,{
				  		pixels: 400000,  // 最大分辨率，默认二百万
				  		quality: 0.1,     // 压缩质量，默认0.8
				  		type: 'jpg',      // 图片类型，默认jpg
				  		base64: false,     // 是否返回base64，默认false，非H5有效
				  	} )
				  .then(res => {
					  console.log("压缩成功", res)
					  	resss(res)
					  // this.multi = res
					  // uni.hideLoading()
				  })
				  .catch(e => {
					  console.log(e)
					  // uni.hideLoading()
				  })
				})
			},
			setUploadData() {
				return new Promise((ress, rejj) => {
					let _e = this.uploadEvet
					console.log("uploadEvet",this.uploadEvet)
					let config = this.ossSignData
					config.token = uni.getStorageSync('token')
					// config.key = parseInt(Math.random()*100000000000000)
					config.key = new Date().getTime()
					let imageUrlList = []
					let isRemove = []					
					this.ffE().then(wCompressList => {
						console.log(wCompressList)
						_e.forEach( (item, index) => {
							console.log("item====>", item.file.path)
							
							uni.uploadFile({
								url: this.$config.url + "/client-api/common/checkImage",
								header: {
									Authorization: config.token
								},
								file: item.file,
								// filePath: resW,
								filePath: wCompressList[index],
								name: 'file',
								success: res => {
									console.log("wCompressList[index]",wCompressList[index])
									let _res = JSON.parse(res.data)
									console.log("_res.code", _res.code)
									if(_res.code == 503){
										// debugger
										isRemove.push(index+1)
										if(_e.length == index+1){
											let newRemove = isRemove.sort((a,b)=>{
												return a-b;
											});
											
											ress(newRemove)
										}
									}else {
										uni.uploadFile({
											url: config.host,
											file: item.file,
											filePath: item.file.path,
											name: "file",
											formData: {
												'key': config.dir + "/" + config.key + index.toString() +".jpg",
												'policy': config.policy,
												'OSSAccessKeyId': config.accessid,
												'signature': config.signature,
												'success_action_status': '200',
												'callback': config.callback,
												'x:auth': config.token,
												'x:owner_type': 2
											},
											success: resFile => {
												console.log("上传成功：resFile", resFile)
												let _resFile = JSON.parse(resFile.data)
												console.log("上传成功：头像", _resFile.data.filename)
												imageUrlList.push(_resFile.data.filename)
												this.imageUrlList = imageUrlList
												console.log("图片集合：", this.imageUrlList)
												if(_e.length == index+1){
													let newRemove = isRemove.sort((a,b)=>{
														return a-b;
													});
													
													ress(newRemove)
												}
												
											},
											fail: err => {
											},
											
										})
										
									}
								 
								 
								 
								},
								complete: c => {
									
								}
							})
						})
					})
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.box{
		width: 750rpx;
		overflow-x: hidden;
	}
	.top{
		width: 750rpx;
		height: 94rpx;
		position: relative;
		border-bottom: 2rpx #ededed solid;
	}
	.top_text{
		display: inline-block;
		line-height: 94rpx;
		margin-left: 40rpx;
	}
	.top_fb{
		display: inline-block;
		color: #FFFFFF;
		font-size: 30rpx;
		padding: 6rpx 18rpx;
		background: #f10200;
		border-radius: 8rpx;
		position: absolute;
		right: 40rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.textarea{
		font-size: 30rpx;
		width: 750rpx;
		height: 200rpx;
		padding: 40rpx;
		.textarea_{
			width: 670rpx;
			height: 100%;
		}
	}
	.lable{
		width: 670rpx;
		padding: 0 40rpx ;
		margin: 10rpx 0 16rpx 0;
		font-size: 26rpx;
	}
	.lable_{
		margin: 0 16rpx 16rpx 0;
		padding: 4rpx 16rpx 6rpx 16rpx;
		display: inline-block;
		border: 2rpx solid #e1e3e5;
		border-radius: 8rpx;
		text{
			color: #f10200;
			margin: 4rpx;
			font-size: 26rpx;
			font-weight: 800;
			// position: absolute;
			// position: relative;
			// top: 4rpx;
		}
	}
	.lable_1{
		display: inline-block;
		color: #606266;
		font-size: 26rpx;
		background: #f5f6f9;
		padding: 6rpx 18rpx 8rpx 18rpx;
		margin: 0 16rpx 16rpx 0;
		border-radius: 8rpx;
		// border: 2rpx solid #f5f6f9;
		
	}
	.image{
		// width: 670rpx;
		width: 700rpx;
		min-height: 156rpx;
		padding: 20rpx 10rpx 20rpx 40rpx;
		position: relative;
		.addBtn_{
			// width: 156rpx;
			// height: 156rpx;
		}
		.addBtn{
			width: 156rpx;
			height: 156rpx;
			background-color: #F5F6F9;
			text-align: center;
			line-height: 156rpx;
			position: absolute;
			top: 32rpx;
			left: 44rpx;
		}
		/deep/ .u-list-item{
			// margin: 0 16rpx 16rpx 0 !important;
			margin-right:16rpx !important;
			margin-bottom:16rpx !important;
		}
		// .ulistitem{
		// 	margin-left: 172rpx !important;
		// }
		// /deep/ .u-preview-wrap {
		// 	position: relative;
		// 	transform: translateY(12rpx);
		// }
	}
	
	
	
	
	
	.popup_ {
		padding: 40rpx 40rpx 0 40rpx;
		width: 710rpx;
		height: 840rpx;
		// height: calc(100vh - 40rpx);
		position: relative;
	}
	.popup_title{
		// margin: 40rpx;
		line-height: 52rpx;
		font-size: 36rpx;
		color: #2d3034;
		font-weight: 700;
		position: relative;
		// margin-bottom: 40rpx;
	}
	.popup_title_{
		position: absolute;
		right: 42rpx;
		top: 2rpx;
	}
	.scroll-view_H{
		width: 670rpx;
		margin-top: 40rpx;
		// background-color: #000000;
		// height: calc(100vh - 320rpx);
		height: 660rpx;
	}
	.popup_content{
		// width: 675rpx;
		width: 100%;
		// height: 190rpx;
		padding-bottom: 150rpx;
		// border: 1px solid #e1e3e5;
		border-radius: 6px;
	}
	.list{
		padding: 6rpx 10rpx;
		background-color: #FFFFFF;
		color: #606266;
		display: inline-block;
		margin: 0 20rpx 20rpx 0;
		border-radius: 8rpx;
		font-size: 26rpx;
		border: 2rpx #e1e3e5 solid;
		font-weight: 500;
	}
	.list_a{
		// background-color: #000000;
		background-color: #2d3034;
		font-weight: 500;
		color: #FFFFFF;
	}
	.wc{
		width: 670rpx;
		height: 88rpx;
		position: absolute;
		bottom: 88rpx;
		// bottom: 0rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		background-color: red;
		text-align: center;
		font-weight: 700;
		line-height: 88rpx;
		border-radius: 12rpx;
	}
	.oprt{
		opacity: 0;
		position: fixed;
		z-index: -1;
	}
</style>
